<template>
  <div class="container">
    <!-- 商品展示区 -->
    <div class="product-display">
      <div class="product-image">
        <!--        <img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ab46a3cN616bdc41.jpg" alt="华为 HUAWEI P20">-->
        <swiper :imagelist="imagesList"></swiper>
      </div>

      <div class="product-info">
        <h1 class="product-title">{{ product.name }}</h1>
        <p class="product-desc">{{ product.description }}</p>
        <p class="product-desc">所属品牌:{{ product.brandName }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所属地区:{{ product.regionName }}</p>
        <div class="product-price">
          <span class="current-price">现价：¥{{ price }}</span>
          <span class="original-price">原价：¥{{ promotionPrice }}</span>
        </div>

        <div class="product-points">
          <span>赠送积分: {{ product.giftPoint }}</span>
        </div>

        <div class="product-service">
          支持服务:
          <span v-for="item in (product.serviceIds ? product.serviceIds.split(',') : [])" :key="item">
       <span v-if="item == 1">无忧退货</span>
       <span v-if="item == 2"> 快速退款</span>
       <span v-if="item == 3"> 免费包邮</span>
     </span>
        </div>

        <skuSelector v-if="skuList.length!=0" :skus="skuList" ref="skuSelector" @change="handleSkuChange"/>

        <div class="product-quantity">
          <span>数量:</span>
          <!--          <input type="number" v-model="quantity"  class="qty-input">-->
          <el-input-number v-model="quantity" :min="1" :max="stock" label="描述文字"></el-input-number>
          <span class="stock">剩余库存: {{ stock }}</span>
        </div>

        <button class="add-to-cart" @click="addCart">加入购物车</button>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="product-tabs">
      <div class="tab-headers">
        <span class="tab-item" :class="{'active':tagIndex==0}" @click="tag(0)">商品详情</span>
        <span class="tab-item" :class="{'active':tagIndex==1}" @click="tag(1)">优惠卷</span>
        <!--        <span class="tab-item">商品参数</span>-->
        <!--        <span class="tab-item">评价</span>-->
      </div>
      <div class="content">
        <!--     商品详情   -->
        <div v-if="tagIndex==0" class="markdown-body" v-html="product.detailHtml">
        </div>
        <!--   优惠卷     -->
        <div v-if="tagIndex==1" style="padding: 10px">
          <el-card v-for="coupon in coupons" :key="coupon.id" class="coupon-card" v-if="coupons.length!=0">
            <div slot="header" class="coupon-header">
              <span class="coupon-title">{{ coupon.name }}</span>
            </div>
            <div class="coupon-content">
              <div class="coupon-amount">￥{{ coupon.amount }}</div>
              <div class="coupon-info">
                <p>满{{ coupon.minPoint }}可用</p>
                <p>有效期至：{{ coupon.endTime }}</p>
              </div>
              <el-button type="success" @click="useCoupon(coupon)" class="use-button">立即领取</el-button>
            </div>
          </el-card>
          <div v-if="coupons.length == 0">
            <el-empty
                image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
                :image-size="500"
                description="该商品暂时没有优惠卷!"/>
          </div>
        </div>

      </div>
    </div>
    <el-backtop :visibility-height="300"></el-backtop>
  </div>

</template>

<script>
import swiper from "@/views/productDetail/componets/swiper";
import skuSelector from "@/views/productDetail/componets/sku";
import "@/assets/css/github-markdown-light.css"

export default {
  name: 'ProductDetail',
  components: {swiper, skuSelector},
  data() {
    return {
      quantity: 1,
      product: {},
      skuList: [],
      imagesList: [],
      //  阶梯
      productLadder: [],
      productFullReduction: [],
      price: "",
      promotionPrice: "",
      stock: 0,
      //处理后的sku列表
      skuObj: [],
      //包含id的数据
      handleSkuList: [],
      tagIndex: 0,
      coupons: []
    }
  },
  mounted() {
    this.getProductDetail()
  },
  methods: {
    tag(index) {
      this.tagIndex = index
      if (index == 1) {
        this.$api.product.getCouponList({productId: this.product.id, regionId: this.product.regionId}).then(res => {
          if (res.code == 200) {
            this.coupons = res.data
          }
        })
      }

    },
    handleSkuChange(sku) {
      if (sku != null) {
        this.price = sku.price
        this.promotionPrice = sku.promotionPrice
        this.stock = sku.stock
      }
    },
    getProductDetail() {
      this.$api.product.getProductDetail((this.$route.query.id * 1)).then(res => {
        if (res.code == 200) {
          this.product = res.data.product
          this.product.brandName = res.data.brand.name
          this.product.regionName = res.data.region.name
          this.imagesList = res.data.product.albumPics?.split(',').map(url => url.trim())
          this.productLadder = res.data.productLadder
          this.productFullReduction = res.data.productFullReduction
          if (res.data.skus.length != 0) {
            this.skuList = res.data.skus
            this.price = res.data.skus[0].price
            this.promotionPrice = res.data.skus[0].promotionPrice
            // this.initSku()
          } else {
            this.skuList = []
            this.stock = res.data.product.stock
            this.price = res.data.product.price
            this.promotionPrice = res.data.product.promotionPrice
          }
        } else {
          this.$router.go(-1)
        }
      })
    },
    addCart() {
      if (!localStorage.getItem("TOKEN")) {
        this.$router.push("/login")
       return this.$message.warning("请先登录~")
      }
      let addCartForm = {}
      addCartForm.productId = this.product.id//商品id
      addCartForm.quantity = this.quantity
      addCartForm.price = this.price
      addCartForm.productPic = this.product.defaultImg
      addCartForm.productName = this.product.name
      addCartForm.productSubTitle = this.product.description
      addCartForm.productRegionId = this.product.regionId
      addCartForm.productBrand = this.product.brandName
      // 在父组件中
      if (this.skuList.length == 0) {//说明可直接购买
        addCartForm.productSkuId = null
        addCartForm.productAttr = ""
      } else {
        let skuData = this.$refs.skuSelector.getSelectedSkuForParent()
        addCartForm.productSkuId = skuData.id
        addCartForm.productAttr = skuData.spData
      }
      console.log(addCartForm)
      this.$api.cart.addCart(addCartForm).then(res => {
        if (res.code==200){
          this.$router.push({path:'/successAddCart',query:{sku:JSON.stringify(this.product)}})
        }
      })

    }

  }
}
</script>

<style scoped lang="less">
/deep/ .el-card__header {
  padding: 0;
}

.title {
  color: #4CAF50;
  text-align: center;
  margin-bottom: 30px;
}

.coupon-card {
  margin-bottom: 20px;
  border-radius: 10px;
  border: 2px solid rgb(138, 182, 96);
  transition: box-shadow 0.3s;
}

.coupon-card:hover {
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(138, 182, 96);
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
}

.coupon-title {
  font-size: 18px;
  font-weight: bold;
}

.coupon-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.coupon-amount {
  font-size: 24px;
  font-weight: bold;
  color: rgb(138, 182, 96);
}

.coupon-info {
  text-align: right;
  color: #606266;
}

.use-button {
  background: rgb(138, 182, 96);
  border-color: rgb(138, 182, 96);
  color: white;
}

.use-button:hover {
  background: #45a049;
  border-color: #45a049;
}

.dialog /deep/ .el-dialog__header {
  background: rgb(138, 182, 96);
  color: white;
}

.dialog /deep/ .el-dialog__title {
  color: white;
}

.dialog /deep/ .el-descriptions-item__label {
  background: #e8f5e9;
  color: rgb(138, 182, 96);
  font-weight: bold;
}

.product-detail {
  /*max-width: 1200px;*/
  /*margin: 0 auto;*/
  /*padding: 20px;*/
}

.content {
  min-height: 500px;
  border: 1px solid gainsboro;

  /deep/ img {
    width: 100% !important;
    height: 100% !important;
  }
}

.product-display {
  display: flex;
  gap: 40px;
  margin: 10px 0;
  /*border: 1px solid red;*/
}

.product-image {
  flex: 0 0 400px;
}

.product-image img {
  width: 100%;
  height: auto;
}

.product-info {
  flex: 1;
  text-align: left;
}

.product-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-desc {
  color: #666;
  margin-bottom: 20px;
}

.product-price {
  margin-bottom: 15px;
}

.current-price {
  color: #f00;
  font-size: 24px;
  margin-right: 10px;
}

.original-price {
  color: #999;
  text-decoration: line-through;
}

.product-points {
  color: #666;
  margin-bottom: 15px;
}

.product-points span {
  margin-right: 20px;
}

.product-service {
  color: #666;
  margin-bottom: 20px;
}

.spec-options {
  display: flex;
  gap: 10px;
  margin: 10px 0 20px;
}

.spec-btn {
  padding: 8px 15px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.spec-btn.active {
  border-color: #409EFF;
  color: #409EFF;
}

.product-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.qty-input {
  width: 80px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
}

.stock {
  color: #666;
  margin-left: 20px;
}

.add-to-cart {
  padding: 8px 10px;
  background: rgb(138, 182, 96);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}

.product-tabs {
  border-bottom: 1px solid #ddd;
}

.tab-headers {
  display: flex;
  gap: 30px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
}

.tab-item.active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}


</style>